<template>
  <div class="el-scroll-box">
    <el-scrollbar>
      <div class="detail-wrapper">
        <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-top:10px">
          <el-breadcrumb-item v-for="item in breadcrumbList" :key="item.text" :to="{ name: item.name }">{{ item.text }}</el-breadcrumb-item>
          <el-breadcrumb-item>正文</el-breadcrumb-item>
        </el-breadcrumb>
        <!--顶部-->
        <div class="articleDetails-top-wrapper">
          <div class="title">{{ articleInfo.title }}</div>
          <p class="time-limit">{{ articleInfo.createTime?formatTime(new Date(articleInfo.createTime).getTime()):'--' }}</p>
          <p class="article-little-info">
            <span class="sort">{{ articleInfo.typeName }}</span>
            <span class="relax">
              {{ articleInfo.replyNum||0 }}回帖&nbsp;-&nbsp;{{ articleInfo.hot||0 }}浏览&nbsp;-&nbsp;{{ articleInfo.collectNum||0 }}收藏
            </span>
          </p>
        </div>
        <!--底部-->
        <div v-show="articleInfo.content" class="articleDetails-content" v-html="articleInfo.content" />
        <!--评论-->
        <div class="common-wrapper">
          <el-input
            ref="common-input"
            v-model="commonInfo"
            type="textarea"
            placeholder="说点什么"
            :autosize="{ minRows: 5}"
            maxlength="230"
            show-word-limit
          />
          <div class="btn-wrapper" style="text-align:right">
            <el-button style="margin-top: 10px" :disabled="!commonInfo" size="small" type="primary" @click="addComment">评论</el-button>
          </div>
          <div class="comment-content">
            <p>全部评论</p>
            <comment-list :can-del-comment="canDelComment" :comment-list="commentList" />
          </div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import { formatTime, arrayToTree } from '@/utils'
import {
  getThisCommunity,
  getCommunityReply,
  addCommunityReply,
  setCommunityCollect,
  delCommunityList
} from '@/api/blog'
export default {
  name: 'QuestionDetail',
  components: {
    CommentList: () => import('@/components/CommentList')
  },
  provide() {
    return {
      reloadReply: this.getCommentList
    }
  },
  data() {
    return {
      formatTime,
      articleInfo: {
        id: '',
        title: '123',
        createTime: '2022-3-16',
        typeName: '123',
        content: '12313123'
      },
      commonInfo: '',
      commentList: [],
      canDelComment: false,
      breadcrumbList: []
    }
  },
  created() {
    const { params } = this.$route
    this.articleInfo.id = params.id

    // 根据id获取帖子详情
    this.getArticleInfoById()
    // 获取评论列表
    this.getCommentList()
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      const breadcrumbList = []
      breadcrumbList.push({
        name: from.name,
        text: from.meta.title
      })
      vm.breadcrumbList = breadcrumbList
      // 刷新回显面包屑
      if (from.name) {
        window.sessionStorage.setItem('breadcrumbList', JSON.stringify(breadcrumbList))
      } else {
        const breadcrumbList = window.sessionStorage.getItem('breadcrumbList')
        if (breadcrumbList) {
          vm.breadcrumbList = JSON.parse(breadcrumbList)
        }
      }
    })
  },
  methods: {
    // 根据id获取帖子详情
    getArticleInfoById() {
      const id = this.articleInfo.id
      const vPar = new this.ParamArr()
      vPar.setStr('PostID', id)
      getThisCommunity(vPar).then(vPar => {
        // 获取文章详情
        const nodes = []
        const table = new this.SQLTable(vPar.getTable('k_shop_forumlist'))
        table.first()
        while (!table.eof()) {
          const node = {}
          node['id'] = table.getValueByName('ID')
          node['type'] = table.getValueByName('Type')
          node['typeName'] = table.getValueByName('TypeName')
          node['createTime'] = table.getValueByName('CreateTime')
          node['lastTime'] = table.getValueByName('LastTime')
          node['createUser'] = table.getValueByName('CreateUser')
          node['userName'] = table.getValueByName('UserName')
          node['title'] = table.getValueByName('Title')
          node['content'] = table.getValueByName('Content')
          node['hot'] = table.getValueByName('Hot')
          node['replyNum'] = table.getValueByName('ReplyNum')
          node['collectNum'] = table.getValueByName('CollectNum')
          nodes.push(node)
          table.next()
        }
        if (nodes[0]) this.articleInfo = nodes[0]
        this.articleInfo.canEdit = vPar.getBool('CanEdit')
        this.articleInfo.canDel = vPar.getBool('CanDel')
        this.articleInfo.canDelReply = vPar.getBool('CanDelReply')
        this.articleInfo.isCollect = vPar.getBool('IsCollect')
      })
    },
    // 获取评论列表
    getCommentList() {
      const id = this.articleInfo.id
      const vPar = new this.ParamArr()
      vPar.setStr('PostID', id)
      getCommunityReply(vPar).then(vPar => {
        this.canDelComment = vPar.getBool('CanDelReply') || false
        const nodes = []
        const table = new this.SQLTable(vPar.getTable('k_shop_forumreply'))
        table.first()
        while (!table.eof()) {
          const node = {}
          node['id'] = table.getValueByName('ID')
          node['pid'] = table.getValueByName('PID') || 0
          node['postID'] = table.getValueByName('PostID')
          node['userID'] = table.getValueByName('UserID')
          node['userName'] = table.getValueByName('UserName')
          node['time'] = table.getValueByName('Time')
          node['content'] = table.getValueByName('Content')
          node['level'] = table.getValueByName('Level')
          nodes.push(node)
          table.next()
        }
        this.commentList = arrayToTree(nodes)
      })
    },
    addComment() {
      const vPar = new this.ParamArr()
      vPar.setStr('PostID', this.$route.params.id)
      vPar.setStr('Content', this.commonInfo)
      addCommunityReply(vPar).then(vPar => {
        this.$message({ type: 'success', message: '评论成功' })
        this.commonInfo = ''
        this.getCommentList()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-scrollbar__wrap {
  overflow-x: hidden;
}
.el-scroll-box {
  width: 100%;
  height: 100%;
  background-image: url('../../../assets/user/Main_bg.png');
  background-size: 100%;
  background-repeat: no-repeat;
  .el-scrollbar {
    height:100%
  }
}
.detail-wrapper {
  width: 80%;
  margin: 0 auto;
}
  .articleDetails-top-wrapper {
    margin-top: 20px;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    p {
      margin: 0;
    }
    .title {
      font-size: 16px;
      font-weight: bold;
    }
    .time-limit {
      font-size: 12px;
      color: #999;
      line-height: 20px;
      padding: 5px 0;
    }
    .article-little-info {
      font-size: 13px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .sort {
        color: #4e8ef9;
      }
      .relax {
        color: #999;
      }
    }
  }
  .articleDetails-content {
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 20px;
    background-color: #fff;
  }
</style>
